<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<meta content="black" name="apple-mobile-web-app-status-bar-style" />
		<meta content="telephone=no" name="format-detection" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="http://m.ydui.org/css/ydui.css" />
		<script src="http://m.ydui.org/js/ydui.flexible.js"></script>
		<style type="text/css">
			.g-scrollview {
				background: #E5E5E5;
				font-size: 0.25rem;
			}
			
			.order-list {
				margin: 0 0.18rem;
			}
			
			.order-item {
				background: #fff;
				height: 2.18rem;
				margin-top: 0.36rem;
				display: -webkit-box;
				display: -webkit-flex;
				display: -ms-flexbox;
				display: flex;
				position: relative;
				overflow: hidden;
			}
			
			.order-item>div {
				margin: 0 0.14rem;
			}
			
			.li-div-left {
				width: 100%;
			}
			
			.div-up {
				border-bottom: 1px dashed #B2B2B2;
				height: 1.09rem;
				line-height: 1.09rem;
				display: flex;
			}
			
			.wd-left {
				width: 65%;
			}
			
			.wd-right {
				color: #B3B2B2;
				width: 35%;
				text-align: right;
			}
			
			.div-down {
				height: 1.09rem;
				line-height: 1.09rem;
				display: flex;
			}
			
			.hg-color {
				color: #FF6C27;
			}
			
			.li-div-right:after {
				font-family: 'YDUI-INLAY';
				font-size: 0.34rem;
				color: #C9C9C9;
				content: '\e608';
				height: 2.18rem;
				line-height: 2.18rem;
				position: absolute;
				right: 0.09rem;
			}
		</style>
	</head>

	<body>
		<section class="g-flexview">
			<header class="m-navbar">
				<a href="javascript:;" class="navbar-item jsBack">
					<i class="back-ico"></i>
				</a>
				<div class="navbar-center">
					<span class="navbar-title">全部</span>
				</div>
				<a href="javascript:;" class="navbar-item">

				</a>
			</header>
			<section class="g-scrollview"  id="J_List">
				<ul class="order-list">
					<!--<li class="order-item">
						<div class="li-div-left">
							<div class="div-up"><span class="wd-left">订单号：ZX20170256215488998</span><span class="wd-right">2017-06-11 10:20:12</span></div>
							<div class="div-down"><span class="wd-left">业务单据 | 订单支付：<em class="hg-color">￥-60.00 | 0.00</em></span><span class="wd-right hg-color">交易成功</span></div>
						</div>
						<div class="li-div-right"></div>
					</li>
					-->
				</ul>
			</section>
		</section>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="http://m.ydui.org/js/ydui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../src/js/lib/template-web.js"></script>
		<script id="orderListTpl" type="text/html">
			{{each list v index}}
			<li class="order-item">
				<div class="li-div-left">
					<div class="div-up"><span class="wd-left">订单号：{{v.NoId}}</span><span class="wd-right">{{v.date}}</span></div>
					<div class="div-down"><span class="wd-left">订单支付：<em class="hg-color">￥{{v.price}}</em></span><span class="wd-right hg-color"></span></div>
				</div>
			</li>
			{{/each}}
		</script>
		<script type="text/javascript">
			! function() {

				// 根据实际情况自定义获取数据方法
				var page = 1,
					pageSize = 10;
				var loadMore = function(callback) {
					$.ajax({
						url: 'orderList.json',
						dataType: 'json',
						data: {
							page: page,
							pagesize: pageSize
						},
						success: function(ret) {
							typeof callback == 'function' && callback(ret);
						},
						complete:function(ret){
							typeof callback == 'function' && callback(ret.responseText);
						}
					});
				};

				$('#J_List').infiniteScroll({
					binder: '#J_List',
					pageSize: pageSize,
					initLoad: true,
					loadingHtml: '<img src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>',
					loadListFn: function() {
						var def = $.Deferred();
						loadMore(function(listArr) {
							var html = template('orderListTpl', {
								list: listArr
							});
							$('.order-list').append(html).find('img').lazyLoad({
								binder: '#J_List'
							});
							def.resolve(listArr);
							++page;
						});

						return def.promise();
					}
				});
			}();
		</script>
	</body>

</html>